<!--这是添加试卷组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox">
			<h3 class="fixTitle">
				<span>添加试卷</span>
				<p>
					<em style="cursor: pointer;" @click="closeAdd"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<div style="padding: 20px 20px 0;">
				<div style="margin-top: 15px;border-bottom: 1px solid #eee;padding: 10px 0;">
					<el-input v-model="paperName" clearable placeholder="请输入试卷名称" @keyup.enter.native="searchPaper" style="width: 400px;"></el-input>
					<el-button type="success" class="search" icon="el-icon-search" @click="searchPaper">搜索</el-button>
				</div>
        <div style="height: 255px; overflow-x: hidden;overflow-y: auto;padding: 10px;" v-loading="listLoading">
            <el-checkbox-group v-model="paperIdArr">
              <el-checkbox style="width: 100%;line-height: 32px;" v-for="(val,index) in checkList" :label="val.paperMainId " :key="index">{{val.name}}</el-checkbox>
            </el-checkbox-group>
				</div>
				<p style="text-align: center;line-height: 50px;">
          <span>共选中{{paperIdArr.length}}套</span>
					<el-button type="primary" icon="el-icon-check" @click="saveManage">保存</el-button>
					<el-button type="info" @click="closeAdd">取消</el-button>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import { togetPapers, toSavePaperId } from '@/api/paper'
export default {
  props: [
    'topicId'
  ],
  components: {
  },
  data() {
    return {
      checkList: [],
      paperIdArr: [],
      paperName: null,
      selectPaperNum: 0,
      users: [],
      listLoading: false
    }
  },
  created() {
    this.getPapers()
  },
  methods: {
    getPapers() {
      this.listLoading = true
      if (this.topicId) {
        var data = { 'topicId': this.topicId, 'paperName': this.paperName }
        togetPapers(data).then(res => {
          // 正确回调
          this.checkList = res.data.data
          this.listLoading = false
        })
          .catch(err => {
            console.log(err)
          })
      }
    },
    saveManage() {
      if (this.topicId && this.paperIdArr.length > 0) {
        var data = { 'topicId': this.topicId, 'paperIdArr': this.paperIdArr }
        toSavePaperId(data).then(res => {
          // 正确回调
          this.paperIdArr = []
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.getPapers()
          this.closeAdd()
        })
          .catch(err => {
            console.log(err)
          })
      }
    },
    searchPaper() {
      this.getPapers()
    },
    closeAdd() {
      this.$emit('hideAddPaper', false)
    }
  },
  watch: {
    topicId: {
      handler: function(val, oldval) {
        if (val != oldval) {
          this.getPapers()
        }
      }
    }
  }
}
</script>
<style scoped>
h3,p{ margin: 0;}
  .fixTitle {
    width: 600px;
  }
	.addBox {
		width: 600px;
		height: 400px;
		overflow: auto;
		background: #fff;
		position: fixed;
		left: 30%;
		top: 15%;
		z-index: 120;
  }
  .el-checkbox {
    margin-left: 0 !important;
  }
  .el-checkbox b{
    font-weight: 500;
    font-size: 14px;
  }
</style>
